<template>
	<view class="content">
		<u-navbar title="秒杀专区" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="banner">
			<image src="https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/c93cff1c-d09c-4dfd-b94e-d14b97bf76ca.png" mode="">
			</image>
			<view class="seckill_list">
				<scroll-view scroll-x="true">
					<view class="seckill_content">
						<template v-for="(item,index) in seckillTimeList">
							<view class="inline" :key="index">
								<view @click="seckillValue=index;changeSeckill(item)"
									:class="['seckill_item', seckillValue==index?'current':'']">
									<view class="time">
										{{item.beginTime}}-{{item.endTime}}
									</view>
									<view class="status">
										{{calculateTimeDifferenceInSeconds(item.currentTiem,item.beginTime)<=0?'抢购中':'即将开始'}}
									</view>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="goods_list">
			<template v-for="(item,index) in seckill_goods">
				<view class="goods_item" :key="index"
					@click="navigatorTo(`/pages_goods/detail-page/detail-page?id=${item.id}&commodityType=${item.commodityType}`)">
					<view class="goods_img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="goods_detail">
						<view class="goods_title">
							{{item.commodityName}}
						</view>
						<view class="goods_price">
							<view class="current_price">
								<text class="seckill_price_text">秒杀价</text>
								<text class="seckill_price">￥{{item.list[0]?item.list[0].specificationPrice:''}}</text>
							</view>
							<view class="original_price">
								<text class="seckill_price_text">原价￥{{item.list[0]?item.list[0].priceOriginally:''}}</text>
							</view>
						</view>
						<view class="residue">
							仅剩{{item.inventory}}件
						</view>
					</view>
					<view class="buy">
						<button v-if="seckillFlag">立即购买</button>
						<button v-else>即将开抢</button>
					</view>
				</view>

			</template>
		</view>
	</view>
</template>

<script>
	import {
		getCommodity
	} from '../../api/index.js'
	import {
		seckillList
	} from '../../api/seckill.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				seckillValue: 0,
				seckill_goods: [],
				seckillTimeList: [],
				seckillFlag: false
			}
		},
		created() {
			this.getSeckillList()
			console.log(this.calculateTimeDifferenceInSeconds('06:00:00', '05:00:00'));
		},
		methods: {
			// 将给定的时间字符串转换为Date对象
			timeStringToDate(timeStr) {
				let parts = timeStr.split(':');
				return new Date(1970, 0, 1, parseInt(parts[0]), parseInt(parts[1]), parseInt(parts[2]));
			},

			// 计算两个时间之间相差的秒数
			calculateTimeDifferenceInSeconds(time1Str, time2Str) {
				let time1 = this.timeStringToDate(time1Str);
				let time2 = this.timeStringToDate(time2Str);

				// 计算毫秒差并转换为秒
				let differenceInMilliseconds = time2 - time1;
				let differenceInSeconds = Math.floor(differenceInMilliseconds / 1000);

				return differenceInSeconds;
			},
			replaceStr(str, index, char) {
				const strAry = str.split('');
				strAry[index] = char;
				return strAry.join('');
			},
			async getSeckillList() {

				const res = await seckillList()
				console.log(res);
				res.rows.forEach(item => {
					if (item.status == 1) {
						let index = item.beginTime.lastIndexOf('-')
						let index2 = item.beginTime.lastIndexOf('-')
						let beginTime = this.replaceStr(item.beginTime, index, 'T')
						let endTime = this.replaceStr(item.endTime, index2, 'T')
						this.seckillTimeList.push({
							id: item.id,
							beginTime: beginTime.split('T')[1],
							endTime: endTime.split('T')[1],
							currentTiem: new Date().toTimeString().split(' ')[0]
						})
					}
				})
				if (this.seckillTimeList[0]) {
					this.getCommodityData({
						commodityType: 1,
						spikesStarttime: this.seckillTimeList[0].id
					})
					this.seckillFlag = this.calculateTimeDifferenceInSeconds(this.seckillTimeList[0].currentTiem, this
						.seckillTimeList[0].beginTime) <= 0 ? true : false
				}
			},
			changeSeckill(item) {
				this.getCommodityData({
					commodityType: 1,
					spikesStarttime: item.id
				})
				this.seckillFlag = this.calculateTimeDifferenceInSeconds(item.currentTiem, item.beginTime) <= 0 ? true : false
			},
			async getCommodityData(data) {
				const res = await getCommodity(data)
				console.log(res);
				this.seckill_goods = res.rows
			},
			navigatorTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		height: 100vh;

		.search_content {
			padding: 20rpx;
		}

		.banner {
			position: relative;
			width: 750rpx;
			height: 422rpx;

			image {
				width: 750rpx;
				height: 422rpx;
				position: absolute;
				z-index: 1;
			}

			.seckill_list {
				position: absolute;
				width: 750rpx;
				bottom: 0;
				left: 0;
				background-color: #fff;
				z-index: 99;

				scroll-view {
					width: 750rpx;
					height: 90rpx;
					display: flex;
				}

				.seckill_content {
					height: 90rpx;
					white-space: nowrap;
					display: flex;

					.seckill_item {
						// width: 160rpx;
						padding: 0 20rpx;
						height: 90rpx;
						font-size: 26rpx;
						color: #777777;
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						&.current {
							background-color: #ff594d;
							color: #fff;
						}

						.time {
							font-weight: bold;
						}
					}

				}
			}
		}

		.goods_item {
			margin-top: 20rpx;
			padding: 23rpx 20rpx;
			background-color: #fff;
			// display: flex;
			position: relative;

			display: flex;
			justify-content: space-between;

			.goods_img {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					display: block;
				}
			}

			.goods_detail {
				width: 490rpx;
				box-sizing: border-box;
				padding-right: 20rpx;

				.goods_title {
					height: 72rpx;
					font-size: 26rpx;
					color: #333332;
					padding-bottom: 20rpx;
					font-weight: bold;
				}

				.goods_price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #777777;
					height: 34rpx;
					margin-bottom: 40rpx;

					.seckill_price {
						color: #e54441;
						font-weight: bold;
					}

					.original_price {
						text-decoration: line-through;
					}
				}

				.residue {
					background-color: #FFA242;
					width: 194rpx;
					height: 34rpx;
					border-radius: 999rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					box-sizing: border-box;
					padding-left: 30rpx;
					line-height: 34rpx;
				}
			}

			.buy {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;

				button {
					background-color: #FF594D;
					color: #fff;
					width: 160rpx;
					height: 44rpx;
					border-radius: 99rpx;
					font-size: 20rpx;
					line-height: 44rpx;
				}
			}
		}
	}
</style>